<template>
    <div class="userInfo warp">
        <el-container class="uf_content">
            <el-aside width="200px">
                <el-menu
                ref="menu"
                :default-active="menuActive"
                class="el-menu-vertical-demo"
                @select="openActive">
                    <el-menu-item index="1">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">账户安全</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-s-check"></i>
                        <span slot="title">我的竞拍</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-s-comment"></i>
                        <span slot="title">我的消息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-star-on"></i>
                        <span slot="title">我的关注</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="5">
                        <i class="el-icon-s-claim"></i>
                        <span slot="title">我的发布</span>
                    </el-menu-item> -->
                </el-menu>
            </el-aside>
            <el-main>
                <myUserInfo v-if="menuActive=='1'" />
                <myBid v-else-if="menuActive=='2'" />
                <myMessage v-else-if="menuActive=='3'"/>
                <myAttention v-else-if="menuActive=='4'"/>
                <myIssue v-else-if="menuActive=='5'"/>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import myUserInfo from './child/userInfo.vue'  //账户安全
import myBid from './child/myBid.vue'  //我的竞拍
import myIssue from './child/myIssue.vue'  //我的发布
import myMessage from './child/myMessage.vue'  //我的消息
import myAttention from './child/myAttention.vue'  //我的关注
export default {
    name:'userInfo',
    components:{
        myUserInfo,myBid,myIssue,myMessage,myAttention
    },
    data(){
        return{
            menuActive:'1',
        }
    },
    created(){
        var query= this.$route.query;
        this.menuActive = query.index;
        //获取当前是 企业2 还是 个人1
        
    },
    methods:{
        openActive(index) {
            this.menuActive = index;
        }
        
       
        // handleAvatarSuccess2(res, file) {
        //     //console.log(res, file)
        //     this.form.card_image = res.data.file_path
        // },
    }
}

</script>
<style lang="less" scoped>

.userInfo{
    min-height: 100vh;
    .uf_content{
        margin-top: 20px;
    }

    .el-aside {
        color: #333;
        text-align: center;
        // line-height: 200px;
    }
    
    .el-main {
        background-color: #fff;
        color: #606266;
        min-height: 600px;
        
    }

    .el-menu-item.is-active {
        color: #e03e2d;
    }
    .el-menu-item:hover{
        background-color: #fdedea;
    }
    
}
</style>